<template>
  <div class="m-content">
    <indexheader></indexheader>
    <div class="innercontent f-clear">
      <div class="left-content">
        <div class="commonbox bednumber">
          <div class="tag txtshadow">床号</div>
          <p class="number txtshadow">{{data.bed_no}}</p>
        </div>
        <div class="commonbox optbox wardround"
             @click="handlerWardround(1)">
          <h3 class="opttitle txtshadow">医生查房</h3>
        </div>
        <div class="commonbox optbox nursing"
             @click="handlerWardround(2)">
          <h3 class="opttitle txtshadow">护理工作</h3>
        </div>
        <div class="commonbox optbox timer"
             @click="signCollect">
          <h3 class="opttitle txtshadow">体征采集</h3>
        </div>
      </div>
      <div class="middle-content">
        <div class="middletop f-clear">
          <div class="commonbox patient">
            <div class="infobox">
              <!-- <div class="m-head">
                <img src="../../../static/images/index/headimg.png">
              </div> -->
              <p class="infoname">{{data.pa_name}}</p>
              <p class="infoage txtshadow">
                {{data.sex_name}}
                <span v-show="data.pa_age1">{{data.pa_age1}}岁</span>
              </p>
              <patientstate :infodata="data.history_disease"
                            :babyinfo="data.isNewBaby"
                            :alertcont="data.history_disease_point"></patientstate>
            </div>
          </div>
          <div class="topright">
            <div class="commonbox txtshadow soscenter">
              <p>{{data.belong_dpname}}</p>
              <i class="ownimg"
                 v-show="data.arrears_fee<0"></i>
            </div>
            <div class="commonbox txtshadow level"
                 :class="[data.order_text_point==1?'level1':data.order_text_point==2?'level2':'level3']">
              <span v-show="data.order_text">{{data.order_text}}<sub>级</sub></span>
            </div>
          </div>
        </div>
        <div class="commonbox remindbox">
          <div class="remindcont">
            <h3 class="titleh3 txtshadow">预约提醒</h3>
            <div class="noticescroll">
              <el-scrollbar :native="false"
                            wrap-class="list"
                            style="height:100%;">
                <div class="reminditems">
                  <p class="item">1、预约、挂当日号、查询报告、智能分诊、导航、健康资讯</p>
                  <p class="item">2、网络预约：5个合作平台网站（点击进入“网络预约”）</p>
                  <p class="item">3、各专科门诊医生诊室预约</p>
                  <p class="item">4、病房预约：各病房为出院病人复诊提供预约挂号服务</p>
                  <p class="item">5、转诊预约：登录全病程服务管理平台</p>
                  <p class="item">6、窗口预约：门诊三楼33、34号窗口</p>
                </div>
              </el-scrollbar>
            </div>
          </div>
        </div>
      </div>
      <div class="right-content">
        <div class="rightinner f-clear">
          <subcard @HandInforM='validate'
                   :secondtimer="secondtimer"
                   :paName="paName"
                   :dpId='dpId'
                   :datas="data"></subcard>
        </div>
        <div class="versionnum">当前版本：3.0</div>
      </div>
    </div>
    <!-- 此处暂未开放 -->
    <unopen></unopen>
    <!--密码输入框-->
    <div class="password"
         v-if="IsShowPassword">
      <div class="Ptitle">
        <span>请输入密码</span>
        <img src="../../../static/images/version/quitBtn.png"
             alt="请稍等"
             @click="quit">
      </div>
      <div class="concealP">
        <div class="warp">
          <span class="diamonds"
                :class="{'active':passwordAll[0]}"></span>
          <span class="diamonds"
                :class="{'active':passwordAll[1]}"></span>
          <span class="diamonds"
                :class="{'active':passwordAll[2]}"></span>
          <span class="diamonds"
                :class="{'active':passwordAll[3]}"></span>
        </div>
        <div class="wrongPassword"
             v-if="wrongP">
          <span>您的密码输入错误</span>
        </div>
      </div>
      <div class="keyboard">
        <span v-for="(item, index) in numKey"
              :key="index"
              @click="handlerNum(item, index)"
              :class="{'btnOpacity': nowIndex === index}">
          <button class="btn"
                  v-if="typeof item === 'number'">
            {{item}}
          </button>
          <img :src="item"
               alt="请等待"
               class="clearNum"
               v-else>
        </span>
      </div>
    </div>
    <div class="maskLayer"
         v-if="IsShowPassword"></div>
    <div class="popcontent"
         v-show="bindflag">
      <div class="unopenbox">
        <div class="stateimg"><img src="../../../static/images/indexone/state03.png"></div>
        <p class="txt">请先绑定床号!</p>
      </div>
      <div class="f-mask"></div>
    </div>
    <!--绑定姓名-->
    <div class="popcontent"
         v-show="bindNameflag">
      <div class="unopenbox">
        <div class="stateimg"><img src="../../../static/images/indexone/state03.png"></div>
        <p class="txt">未绑定人员信息</p>
      </div>
      <div class="f-mask"></div>
    </div>
  </div>
</template>

<script>
import urls from '../../common.js'
import { mapState } from 'vuex'
import indexheader from '../../pages/common/indexheader.vue'
import subcard from './subcard.vue'
import patientstate from './patientstate.vue'
import unopen from './unopen.vue'
import axios from 'axios'
export default {
  name: 'secondhome',
  data () {
    return {
      bindflag: false,
      data: [],
      dpId: '',
      IsShowPassword: false,
      numKey: [1, 2, 3, 4, 5, 6, 7, 8, 9, '../../../static/images/index/clearAll.png', 0, '../../../static/images/index/clearOne.png'],
      passwordAll: [],
      nowIndex: '',
      wrongP: '',
      phonePassword: '',
      num3: '',
      hors: '',
      isStation: '',
      secondtimer: '',
      paName: '',
      bindNameflag: false,
      pcardNo: ''
    }
  },
  components: {
    indexheader,
    subcard,
    patientstate,
    unopen
  },
  computed: {
    ...mapState({
      bedNo: 'bedNo'
    })
  },
  created () {
    this.personHomeInfo()
  },
  activated () { // 配合keep-alive 使用 组件变化触发此方法
    this.secondtimer = window.setInterval(() => {
      this.personHomeInfo()
    }, 600000)
  },
  mounted () {
    // this.submitPassword({
    //   bed_no: '2101x+1',
    //   password: '3864'
    // })
  },
  watch: {
    $route (to, from) {
      if (to.path === '/') {
        this.personHomeInfo()
      }
    }
  },
  methods: {
    personHomeInfo () {
      var _this = this
      if (localStorage.getItem('WardBedNum')) {
        _this.$http.get(urls.personHomeInfo + '/' + localStorage.getItem('WardBedNum')).then(result => {
          if (result.body.code === '200') {
            _this.data = result.body.data
            _this.dpId = result.body.data.dp_id
            _this.paName = result.body.data.pa_name ? result.body.data.pa_name : ''
            _this.pcardNo = result.body.data.card_no
            _this.$store.commit('getcardNo', _this.pcardNo)
            this.postOrder()
          } else if (result.body.code === '500') {
            _this.data = result.body.data
            _this.paName = ''
          }
        })
      } else {
        _this.data = ''
      }
    },
    postOrder: function () {
      this.$store.dispatch('changePersonInfo', this.data)
    },
    handlerWardround (station) {
      if (this.bedNo === '') {
        this.bindflag = true
        let t1 = setTimeout(() => {
          this.bindflag = false
          clearTimeout(t1)
        }, 1000)
      } else {
        if (this.paName) {
          this.IsShowPassword = true
          this.wrongP = false
          this.phonePassword = 1
          this.isStation = station // 判断护士查房
        } else {
          let _this = this
          _this.bindNameflag = true
          setTimeout(function () {
            _this.bindNameflag = false
          }, 2000)
        }
      }
    },
    submitPassword (password, num) {
      axios.post(urls.submitUserPassword, password)
        .then((res) => {
          if (res.status === 200) {
            if (res.data) {
              this.IsShowPassword = false
              this.passwordAll = []
              if (this.num3 === 2) {
                this.$router.push({ path: '/InforM' })
                window.clearInterval(this.secondtimer)
                clearInterval(window.timer)
              } else {
                this.$router.push({ path: '/CostQuerys' })
                window.clearInterval(this.secondtimer)
                clearInterval(window.timer)
              }
            } else {
              this.wrongP = true
              this.passwordAll = []
            }
          }
        })
    },
    CommonsubmitPassword (password, number) {
      axios.get(urls.submitPassword + '?password=' + password)
        .then((res) => {
          if (res.status === 200) {
            if (res.data) {
              this.IsShowPassword = false
              this.passwordAll = []
              if (this.isStation === 1) {
                this.$router.push({path: '/Ward', query: {title: '医生查房'}})
              } else {
                this.$router.push({path: '/Ward', query: {title: '护理工作'}})
              }
            } else {
              this.wrongP = true
              this.passwordAll = []
            }
          }
        })
    },
    // handlerNursing () {
    //   android.EmitNursing()
    // },
    handlerNum (num, index) {
      this.nowIndex = index
      this.wrongP = false
      if (typeof num === 'number') { // 按键是否是数字
        this.passwordAll.push(num.toString())
        let passLen = this.passwordAll.length
        let passStr = ''
        if (passLen === 4) { // 密码长度够了就去验证是否正确
          for (let i = 0; i < passLen; i++) {
            passStr += this.passwordAll[i]
          }
          if (this.phonePassword === 2) {
            this.submitPassword({
              bed_no: localStorage.getItem('WardBedNum'),
              password: passStr
            })
          } else {
            this.CommonsubmitPassword(passStr)
          }
          this.nowIndex = ''
        }
      } else { // 按钮是字符串处理
        if (num.indexOf('All') === -1) {
          this.passwordAll.pop()
        } else {
          this.passwordAll = []
        }
      }
    },
    quit () {
      this.passwordAll = []
      this.nowIndex = ''
      this.IsShowPassword = false
    },
    validate (num2, num3) {
      this.IsShowPassword = true
      this.wrongP = false
      this.phonePassword = num2
      this.num3 = num3
    },
    signCollect () {
      console.log(this.bedNo)
      if (this.bedNo === '') {
        this.bindflag = true
        setTimeout(() => {
          this.bindflag = false
        }, 2000)
      } else if (!this.paName) {
        this.bindNameflag = true
        setTimeout(() => {
          this.bindNameflag = false
        }, 2000)
      } else {
        this.$router.push({ path: '/sign' })
        clearInterval(window.timer)
      }
    }
    // clockHandler () {
    //   this.$router.push('/Clock')
    //   clearInterval(window.timer)
    // }

  }
}
</script>

<style lang="stylus" scoped>
@import '../../assets/css/variables.styl'
@import '../../assets/css/indexcommon.css'
.m-content
  position relative
  display block
  padding 0.2rem 0.3rem 0 0.3rem
  text-align center
  .innercontent
    margin 0.1rem 0 0 0
    display flex
    .left-content
      // width: 3.3rem;
      margin-right 0.3rem
      // float: left;
      flex 1
      .bednumber
        width 3.3rem
        height 2.2rem
        background #37c0b0
        margin-bottom 0.1rem
        box-shadow 0px 10px 38.54px 2.46px rgba(0, 0, 0, 0.07)
        position relative
        .tag
          display inline-block
          font-size 0.36rem
          color #fff
          position absolute
          left 0.24rem
          top 0.38rem
        .number
          font-size 0.72rem
          color #fff
          line-height 2.2rem
          text-align center
      .optbox
        width 3.3rem
        height 2.22rem
        position relative
        margin-bottom 0.1rem
        .opttitle
          font-size 0.36rem
          color #fff
          position absolute
          left 0.24rem
          top 0.3rem
      .wardround
        background-image url('../../../static/images/index/Rounds.png')
        box-shadow 0px 10px 38.54px 2.46px rgba(25, 142, 190, 0.29)
      .nursing
        background-image url('../../../static/images/index/NursingWork.png')
        box-shadow 0px 10px 38.54px 2.46px rgba(0, 0, 0, 0.07)
      .timer
        background-image url('../../../static/images/index/caiji.png')
    .middle-content
      display block
      width 7.16rem
      float left
      margin-right 0.2rem
      .middletop
        margin-bottom 0.1rem
        .patient
          width 3.8rem
          height 4.64rem
          background-image url('../../../static/images/index/PatientName.png')
          box-shadow 0px 10px 43.24px 2.76px rgba(121, 122, 231, 0.3)
          float left
          .infobox
            width 3.8rem
            height 4.64rem
            vertical-align middle
            text-align center
            overflow hidden
            display table-cell
            .m-head
              width 1rem
              height 1rem
              border-radius 50%
              margin 0.35rem auto 0.45rem auto
              overflow hidden
              img
                width 100%
                height 100%
                display block
            .infoname
              font-size 0.6rem
              color #fff
              margin-bottom 0.4rem
            .infoage
              font-size 0.36rem
              color #fff
              span
                margin-left 0.15rem
        .topright
          width 3.18rem
          float right
          .soscenter
            width 3.18rem
            height 2.2rem
            background-image url('../../../static/images/index/SOS.png')
            box-shadow 0px 10px 38.54px 2.46px rgba(0, 0, 0, 0.07)
            margin-bottom 0.2rem
            position relative
            p
              font-size 0.34rem
              color #fff
              text-align left
              padding 0.37rem 0 0 0.3rem
            .ownimg
              display inline-block
              width 0.34rem
              height 0.34rem
              background-image url('../../../static/images/indexone/oweicon.png')
              background-size 100% 100%
              position absolute
              top 0.9rem
              right 0.43rem
          .level
            width 3.18rem
            height 2.23rem
            font-size 0.9rem
            line-height 2.23rem
            color #f5f5f5
            // background-image: url('../../../static/images/index/Level.png');
            box-shadow 0px 10px 38.54px 2.46px rgba(0, 0, 0, 0.07)
            sub
              font-size 0.4rem
              margin-left 0.1rem
              vertical-align 0.1rem
          .level1
            background-image url('../../../static/images/indexone/Level.png')
          .level2
            background-image url('../../../static/images/indexone/Level1.png')
          .level3
            background-image url('../../../static/images/indexone/Level2.png')
      .remindbox
        width 7.16rem
        height 4.43rem
        background #49cfbf
        .remindcont
          text-align left
          padding 0.26rem 0.1rem 0.26rem 0.3rem
          .titleh3
            font-size 0.36rem
            color #fff
            margin-bottom 0.5rem
          p
            font-size 0.34rem
            color #fff
            margin-bottom 0.5rem
          .noticescroll
            height 3.3rem
            .reminditems
              .item
                font-size 0.24rem
                color #e3f1ef
                margin-bottom 0.3rem
    .right-content
      width 7.6rem
      float left
      .rightinner
        .uintbox
          width 3.7rem
          height 1.6rem
          margin-bottom 0.2rem
          position relative
          float left
          &:nth-child(2n)
            float right
          .remindh3
            font-size 0.3rem
            color #fff
            position absolute
            top 0.2rem
            left 0.2rem
        .broadcast
          background-image url('../../../static/images/index/TV.png')
        .amuse
          background-image url('../../../static/images/index/game.png')
        .patientinfo
          background-image url('../../../static/images/index/PatientInfo.png')
        .costquery
          background-image url('../../../static/images/index/CostQuery.png')
        .message
          background-image url('../../../static/images/index/Message.png')
        .collection
          background-image url('../../../static/images/index/SignsCollection.png')
        .education
          background-image url('../../../static/images/index/HealthInfo.png')
        .satisfaction
          background-image url('../../../static/images/index/Satisfaction.png')
        .order
          background-image url('../../../static/images/index/Order.png')
        .market
          background-image url('../../../static/images/index/Market.png')
      .versionnum
        font-size 0.22rem
        color #e3f1ef
        background #37c0b0
        height 0.45rem
        line-height 0.45rem
        border-radius 0.5rem
        margin-top 0.01rem
  .password
    position absolute
    width 4.42rem
    height 5.7rem
    background #ffffff
    left 50%
    top 25%
    // transform: translateX(-50%)
    margin 0 -2.21rem
    z-index 9
    .Ptitle
      position relative
      height 0.9rem
      line-height 0.9rem
      color #1c1c1c
      font-size 0.3rem
      border-bottom 1px solid #ebebeb
      background #f8f8f8
      span
        vertical-align middle
      img
        position absolute
        right 0.2rem
        top 50%
        transform translateY(-50%)
        vertical-align middle
    .concealP
      position relative
      height 1.62rem
      background #f8f8f8
      .warp
        position absolute
        top 50%
        left 50%
        border 2px solid #ebebeb
        border-radius 5px
        height 0.6rem
        width 3rem
        margin -0.3rem -1.5rem
        display flex
        justify-content center
        .diamonds
          display inline-block
          height 0.58rem
          width 0.75rem
          border-left 1px solid #ebebeb
          line-height 0.65rem
        :first-child
          border-left 0px solid #ebebeb
        .active:after
          content ''
          display inline-block
          width 25px
          height 25px
          border-radius 50%
          background #1a1a1a
      .wrongPassword
        position absolute
        top 75%
        left 50%
        transform translateX(-50%)
        width 100%
        color red
    .keyboard
      background-color #d4d8db
      display flex
      flex-wrap wrap
      justify-content space-between
      .btnOpacity
        .btn
          background-color #37c0b0
      span
        display inline-block
        width 1.46rem
        display flex
        align-items center
        justify-content center
        .btn
          width 1.47rem
          height 0.8rem
          background #ffffff
.maskLayer
  position absolute
  width 100%
  height 100%
  background #ccc
  opacity 0.5
  top 0
  left 0
  right 0
  bottom 0
.Notbound
  // position:
.unopenbox
  display inline-block
  width 2.22rem
  height 2.02rem
  background-color rgba(0, 0, 0, 0.3)
  border-radius 0.1rem
  position absolute
  top 50%
  left 50%
  margin -1.01rem 0 0 -1.11rem
  z-index 11
  .stateimg
    width 0.78rem
    height 0.78rem
    margin 0.4rem auto 0.25rem auto
    img
      width 100%
      height 100%
      display block
  .txt
    font-size 0.3rem
    text-align center
    color #fff
.f-mask
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  z-index 10
  background rgba(0, 0, 0, 0)
</style>
